<template>
	<view>
		<text>{{userName}}</text>
		
		<uni-rate v-model="value" @change="onChange"/>
		
		<PageHeader></PageHeader>
		<view>
			我是body....
		</view>
		
		<page-content :content="userName"></page-content>
		
		<page-content content="静态:我是哈哈哈哈哈哈哈"></page-content>
		
		<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
		<!-- <blog-post is-published></blog-post> -->
		
		<!-- <blog-post v-bind="post"></blog-post> -->
		    <!-- 上面的模板等价于： -->
		<!-- <blog-post
			v-bind:id="post.id"
			v-bind:title="post.title"
		></blog-post> -->
		
		<component-a :title.sync='title'>
			
			<view>Your Profile</view>
			<uni-rate v-model="value" @change="onChange"/>
			
		</component-a>
		
		<!-- //非H5端不支持通过this.$refs.content来获取view实例 -->
		<view ref="content">hello</view>
		
		<!-- //支持通过this.$refs.child来获取component-a实例 -->
		<component-a ref="child" title.sync='ABCDe'></component-a>
		
		<button @click="getRef" >getRef</button>
		
		<PageFooter></PageFooter>

	</view>
</template>

<script>
	// 局部注册
	import PageFooter from '../../components/page-footer.vue'
	export default {
		components:{PageFooter},
		data() {
			return {
				userName: '动态:我爱北京天安门',
				value: 5,
				title: 'hello world'
			}
		},
		methods: {
			onChange(){
				console.log(this.value);
			},
			getRef(){
				console.log(this.$refs.content)
				console.log(this.$refs.child)
				this.$refs.child.hello();
			}
		}
	}
</script>

<style>

</style>
